<template>
	<view class="page">
		<PageHeader :showPlaceHolder="false" customTitle="新品上架"></PageHeader>
		<view class="page-content">
			<CardComponent class="card" :showTitle="false" :showImage="false">
				<template #default>
					<fui-form class="form" labelColor="#333333" labelWidth="200" labelWeight="bold" labelSize="28"
						labelRight="60" ref="formRef" top="0" :model="formData" :show="false">
						<fui-form-item arrow class="form-item" asterisk label="上架商品"
							:padding="['32rpx', '32rpx', '16rpx']" prop="name">
							<fui-input @click="jumpSelectList" size="28" disabled :padding="[0]" :borderBottom="false"
								placeholder="请选择上架商品" v-model="formData.name"></fui-input>
						</fui-form-item>
						<fui-form-item class="form-item" asterisk label="商品分类" :padding="['32rpx', '32rpx', '16rpx']"
							prop="categoryName">
							<fui-input size="28" disabled :padding="[0]" :borderBottom="false" placeholder="请输入商品分类"
								v-model="formData.categoryName"></fui-input>
						</fui-form-item>
						<fui-form-item class="form-item" asterisk label="上架数量" :padding="['32rpx', '32rpx', '16rpx']"
							prop="listingNum">
							<fui-input size="28" :padding="[0]" :borderBottom="false" placeholder="请输入上架数量"
								v-model="formData.listingNum" type="number" number :min="1" :max="9999999" @input="onChangeNum($event, 'listingNum')"></fui-input>
						</fui-form-item>
						<fui-form-item class="form-item" asterisk label="上架预警值" :padding="['32rpx', '32rpx', '16rpx']"
							prop="warningNum">
							<fui-input size="28" :padding="[0]" :borderBottom="false" placeholder="请输入上架预警值"
								v-model="formData.warningNum" type="number" number :min="1" :max="9999" @input="onChangeNum($event, 'warningNum')"></fui-input>
						</fui-form-item>
					</fui-form>
				</template>
			</CardComponent>
			<view class="submit-btn">
				<fui-button class="btn" width="42vw" @click="backPage" height="78rpx" color="var(--fui-color-primary)" plain
					borderColor="var(--fui-color-primary)" text="取消"></fui-button>
				<fui-button class="btn" width="42vw" @click="submit" height="78rpx" background="var(--fui-color-primary)"
					text="上架"></fui-button>
			</view>
		</view>

	</view>
</template>

<script setup>
	import PageHeader from '@/components/header';
	import CardComponent from '@/components/card/normal';
	import storage from '@/utils/storage'
	import constant from '@/utils/constant'
	import goodsApi from '@/api/goods';
	import {
		useStore
	} from 'vuex'

	import {
		ref,
		inject,
		watch,
		computed
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'

	const store = useStore();
	const tab = inject('$tab');
	const modal = inject('$modal');

	const formData = ref({
		name: '',
	});

	const formRef = ref(null);
	//校验规则
	const rules = ref([{
			name: 'name',
			rule: ['required'],
			msg: ['请选择上架商品']
		},
		{
			name: 'listingNum',
			rule: ['required'],
			msg: ['请输入上架数量']
		}, {
			name: 'warningNum',
			rule: ['required'],
			msg: ['请输入上架预警值']
		}, {
			name: 'categoryName',
			rule: ['required'],
			msg: ['请输入商品分类']
		},

	]);

	const onChangeNum = async (value, feild) => {
		if (value <= 0) {
			modal.msgError('数量必须大于0！')
			formData.value[feild] = await ''
		} else if (value.toString().indexOf('.') > -1) {
			modal.msgError('数量必须为整数！')
			formData.value[feild] = await ''
		}
	}

	const backPage = () => {
		tab.navigateBack({
			delta: 1
		});
	};


	const productData = ref({})
	const isDetail = ref(false) //判断详情跳进来的，还是列表
	onLoad((option) => {
		// 判断是从详情页跳转还是列表页
		isDetail.value = JSON.parse(option.isDetail) || ''
		init();
	})

	const init = () => {
		// 详情跳转进来回显
		if (isDetail.value) {
			const {
				detailData
			} = store.getters
			formData.value = {
				name: detailData.name,
				spuId: detailData.id,
				categoryName: detailData.productCategory,
			}
		}
	}

	// 跳转分类选择组件
	const jumpSelectList = () => {
		if (!isDetail.value) {
			uni.navigateTo({
				url: `/pages/goods/selectProduct?isRadio=true`
			})
		}
	}

	// 上架商品选中后返回会调用，回显
	onShow(() => {
		if (store.getters.newReleaseProduct) {
			productData.value = JSON.parse(store.getters.newReleaseProduct)

			formData.value.name = productData.value.name; //商品名称
			formData.value.spuId = productData.value.id; //商品id

			const productCategoryList = store.getters.productCategoryList
			const categoryName = productCategoryList.filter((item) => item.id == productData.value.categoryId)[0]
				.name || '' //分类名称
			formData.value.categoryName = categoryName || ''
			store.commit('SET_NEW_RELEASE_PRODUCT', "")
		}
	})


	// 提交表单方法
	const submit = async () => {
		try {
			// 调用validator方法并传入所需参数
			const res = await formRef.value.validator(formData.value, rules.value);
			if (res.isPassed) {
				goodsApi.listingProducts(formData.value).then((res) => {
					if (res.code === 0) {
						modal.msgSuccess('商品已提交上架申请');
						// 刷新列表
						store.commit('SET_REFRESH_FLAG', !store.getters
							.refreshFlag)

						// 返回列表页
						setTimeout(() => {
							uni.navigateBack({
								delta: isDetail.value ? 2 : 1
							});
						}, 500);
					}
				})
			} else {
				modal.msgError(res.errorMsg);
			}
		} catch (err) {
			console.log(err);
		}
	};
</script>

<style lang="scss">
	.page {
		width: 100%;
		background-color: #f2f4f5;
		min-height: 100%;

		&-content {
			width: calc(100% - 56rpx);
			margin: 0 auto;
			padding: 20rpx 0;
			box-sizing: border-box;
		}

		.submit-btn {
			display: flex;
			justify-content: space-between;
			width: 100%;
			margin-top: 100rpx;
		}
	}
</style>